<template>
   <div class="sidebar-container">
     <!--      加载图标-->
     <van-loading v-show="isLoading"  class="loading" size="24px" color="#42bBaa" vertical>加载中...</van-loading>
       <div class="sideNav">
         <van-collapse  v-model="activeName"  accordion size="mini" icon="none" :border="false">
           <van-collapse-item :title="item.name" :name="index + ''" :border="false" v-for="(item,index) in categoryList" :key="index">
             <van-sidebar  v-model="activeKey" >
               <van-sidebar-item @click="changeIndex(item1.id)" :title="item1.name" v-for="(item1 , index) in item.children" :key="index" />
             </van-sidebar>
           </van-collapse-item>
         </van-collapse>
       </div>
     <div class="category-navbar">
       <van-tabs v-model="active" sticky>
         <van-tab class="tags"  :title="item" v-for="(item,index) in tags" :key="index"></van-tab>
       </van-tabs>
     </div>
       <div class="wrapper" ref="wrapper">
         <div class="content">
           <van-card
               class="goods-card"
               v-for="(item, index) in categoryGoodsList"
               :key="index"
               :num="item.sales"
               tag="标签"
               :price="item.price"
               :title="item.title"
               :thumb="item.cover_url"
               origin-price="10.00"
           />
         </div>
       </div>
     </div>


</template>

<script>
import {getCateGoryGoods} from "../../../api/home/category";
import BScroll from "better-scroll";
export default {
  name: "SideBar",
  props:['categoryList'],
  data(){
    return{
      activeKey: 0,
      activeName: '1',
      active:0,
      tags:['销量排序','价格排序','评化排序'],
      title:[0],
      name:'1',
      page:1,
      cid:2,
      categoryGoodsList:[],
      bScroll:null,
      isLoading:true
    }
  },
  created() {
    this.activeName = '0'
    this.getCateGory()
  },
  mounted() {
    // const doc = document.querySelector('.wrapper')
    console.log(this.$refs.wrapper);
    this.$nextTick(()=>{
        this.bScroll = new BScroll(this.$refs.wrapper,{
          probeType:3,
          click:true,
          scrollX:false,
          useTransition:false,
          scrollY:true,
          bounce:true,
          pullUpLoad: true
        })
      }),
        this.$nextTick(()=>{
          this.scroll()
        })
  },
  // watch:{
  //   getCateGoryGoods(){
  //     this.scroll()
  //   }
  // },
  methods:{
    changeIndex(id){
      console.log(id);
      this.cid = id
      this.getCateGory()
    },
    async getCateGory(){
      const res = await getCateGoryGoods('sales',this.cid,this.page)
      res ? this.isLoading = false : true
      const {data:categoryGoodsList} = res.data.goods
      this.categoryGoodsList.push(...categoryGoodsList)
      console.log(this.categoryGoodsList);
    },
    scroll(){
      this.bScroll.on('scroll',(position)=>{
        console.log(position.y);
        // this.bScroll.refresh()
      })
      this.bScroll.on('pullingUp',()=>{
        this.page = this.page + 1
        this.getCateGory()
      })
      this.bScroll.finishPullUp()
      this.bScroll.refresh()
    }
  }
}
</script>

<style scoped lang="css">
.sidebar-container{
  position: relative;
  height: 100%;
  display: flex;
  margin-top: 45px;
  padding-bottom: 50px;
}
.sideNav{
  /*position: fixed;*/
  /*width: 30%;*/
  /*height: 100%;*/
  /*top: 45px;*/
 height: 100vh;
  /*width: 30%;*/

}

.van-tab {
  flex: 1;
  font-size: 14px;
}

.van-card__title{
  font-size: 14px;
}
.category-navbar{
  width: 70%;
  position: fixed;
  top: 45px;
  /*padding-bottom: 50px;*/
  z-index: 100;
  margin-left: 30%;
}
.van-tabs__nav{
  /*position: fixed;*/
  /*top: 0;*/
  /*z-index: 100;*/
}

.wrapper{
  position: absolute;
  /*height: 100vh;*/
  /*position: absolute;*/
  /*top: 40px;*/
  /*bottom: 43px;*/
  /*left: 30%;*/
  /*right: 0;*/
  /*margin-left: 30%;*/
  width: 70%;
  /*margin-top: 40px;*/
  left: 30%;
  top: 45px;
  height: calc(100vh - 49px);

}

.content{
  /*overflow: hidden;*/
  overflow: hidden;
  padding-bottom: 43px;
}
.goods-card{
  /*margin-top: 20px;*/
}
.content{
  /*padding-bottom: 50px;*/
  /*overflow: hidden;*/
  /*margin-top: 20px;*/
  /*padding-top: 20px;*/
  /*overflow: hidden;*/
}
.loading{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 100;
}
</style>